<template>
    <el-popover :width="400" trigger="click" :disabled="props.disabled">
        <template #reference>
            <div class="emoji-btn" :class="{ disabled: props.disabled }" @click="showPopover">
                <img class="icon" src="@/assets/image/emoji/01.png" alt="" />
                <span class="icon-text">表情</span>
            </div>
        </template>
        <div class="emoji-box">
            <el-tabs type="border-card" class="emoji-tabs">
                <el-tab-pane v-for="item in emojiJson" :key="item.name" :label="item.name" lazy>
                    <el-scrollbar height="142px">
                        <div class="emoji-content">
                            <div v-for="ite in item.list" :key="ite.imgUrl" class="emoji-item" @click="addEmoji(ite)">
                                <img v-imgLazy="`${imgHost}/${ite.imgUrl}`" />
                            </div>
                        </div>
                    </el-scrollbar>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-popover>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch, onMounted, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const imgHost = ref<string>('https://static.scrm.keyid.cn/assets/emoji');
const emojiJson = ref<Array<any>>([]);

interface Props {
    disabled: boolean;
}

const props = withDefaults(defineProps<Props>(), {
    disabled: false
});

const emit = defineEmits(['change']);

const addEmoji = (item: any) => {
    emit('change', item);
};

const getEmojiJsonFn = async () => {
    const json_url = 'https://static.scrm.keyid.cn/assets/emoji/emoji.json';
    return axios.get(json_url).then(res => {
        emojiJson.value = res.data;
    });
};

const showPopover = async () => {
    if (!emojiJson.value.length) {
        await getEmojiJsonFn();
    }
};
</script>
<style lang="scss" scoped>
.emoji-btn {
    display: flex;
    align-items: center;
    .icon {
        width: 22px;
        height: 22px;
    }
    .icon-text {
        font-size: 12px;
        line-height: 1;
        color: #555;
        white-space: nowrap;
        padding-left: 2px;
        &:hover {
            color: #f96b02;
        }
    }
}
.disabled:hover {
    cursor: not-allowed;
}
.emoji-box {
    ::v-deep .el-tabs--border-card {
        & > .el-tabs__content {
            padding: 6px !important;
        }
        & > .el-tabs__header .el-tabs__item {
            &:hover {
                color: #ff6b00;
            }
            &.is-active {
                color: #ff6b00;
            }
        }
    }
    .el-tabs.emoji-tabs {
        .el-tabs__content {
            .emoji-content {
                display: grid;
                grid-gap: 2px;
                grid-template-columns: repeat(10, minmax(32px, 1fr));
                .emoji-item {
                    width: 32px;
                    height: 32px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid #fff;
                    user-select: none;
                    &:hover {
                        cursor: pointer;
                        img {
                            transform: scale(1.4);
                        }
                    }
                    img {
                        width: 72%;
                        height: 72%;
                        transition: all 0.2s;
                    }
                }
            }
        }
    }
}
</style>
